<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>视频分屏</title>
		<link href="layui/css/layui.css" rel="stylesheet" />
		<link href="video/css/video-js.min.css" rel="stylesheet" />
		<link href="video/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
		<link href="video/css/player.css" rel="stylesheet" />
		<style>
			.palyer_bg_color{
				background-color: #FFFFFF;
			}
			.palyer_bg_color1{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="video_screen" class="layui-row layui-col-space5" style="height: 100%; margin: auto;">
			<template v-for="(screen,index) in screens">
				<div v-bind:id="getId(index)" v-bind:class="getClass(index)" class="page" @mouseenter="enter(index)" @mouseleave="leave(index)"
				 v-on:dblclick="fullscreen(index)"  v-on:click="playByUrl(index)">
					<div class="header">
						<label>{{screen.video_addr}}</label>
					</div>
					<div class="content">
						<video v-bind:id="getVideoId(index)" class="video-js vjs-default-skin player" preload="auto" autoplay="true"
						 muted="true" poster="img/temp-bg.jpg" data-setup="{}">
							你的浏览器不支持Video标签！！！
						</video>
						<div class="control">
							<div class="fa fa-pause play_pause"></div>
							<div class="right">
								<div :id="getPtzId(index)" v-show="show_ptz" title="云台控制" class="fa fa-arrows" @click="openControlPanel(index)"></div>
								<div title="静音" class="fa fa-volume-off"></div>
								<div title="全屏" class="fa fa-arrows-alt expand" @click="fullscreen(index)"></div>
							</div>
						</div>
						<div :id="getPtzBlockId(index)" class="ptz-block">
							<div title="上" class="ptz-cell ptz-up up ptz"><i @mousedown="ptzcontrol(index,'up')" @mouseup="stopcontrol(index,'up')" class="fa fa-chevron-up"></i></div>
							<div title="左" class="ptz-cell ptz-left left ptz"><i @mousedown="ptzcontrol(index,'left')" @mouseup="stopcontrol(index,'left')" class="fa fa-chevron-left"></i></div>
							<div title="云台控制" class="ptz-center"><i class="fa fa-arrows"></i></div>
							<div title="右" class="ptz-cell ptz-right right ptz"><i @mousedown="ptzcontrol(index,'right')" @mouseup="stopcontrol(index,'right')" class="fa fa-chevron-right"></i></div>
							<div title="下" class="ptz-cell ptz-down down ptz"><i @mousedown="ptzcontrol(index,'down')" @mouseup="stopcontrol(index,'down')" class="fa fa-chevron-down"></i></div>
							<div title="缩" class="ptz-cell ptz-plus zoomin focusing"><i @mousedown="ptzcontrol(index,'zoomin')" @mouseup="stopcontrol(index,'zoomin')" class="fa fa-plus-circle"></i></div>
							<div title="放" class="ptz-cell ptz-minus zoomout focusing"><i @mousedown="ptzcontrol(index,'zoomout')" @mouseup="stopcontrol(index,'zoomout')" class="fa fa-minus-circle"></i></div>
						</div>
					</div>
					<div class="footer"></div>
				</div>
			</template>
		</div>
		<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="video/js/video.min.js"></script>
		<script type="text/javascript" src="video/js/flv.min.js"></script>
		<script type="text/javascript" src="video/js/videojs-flvjs.main.js"></script>
		<script type="text/javascript" src="video/setupVideo.js"></script>
		<script type="text/javascript" src="layui/layui.js"></script>
		<script type="text/javascript" src="lib/vue/vue.js"></script>
		<script type="text/javascript" src="js/common/common.js"></script>
		<script type="text/javascript" src="js/common/video/videoComm.js"></script>
		<script type="text/javascript" src="js/splitScreen.js"></script>
	</body>
</html>
